<template>
	<view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map class="maps" :latitude="latitude" :longitude="longitude" scale="16" :markers="markers" show-location="true"
				 @markertap="markertap">
				</map>
			</view>
		</view>

		<!-- <navigator class="route"  url="/pages/routePlanning/search" hover-class="navigator-hover">
			<view class="start input">
				 <text>{{destination}}</text>
			</view>
		</navigator> -->
		<cover-view @click="navigatorTo" class="route">
			<cover-view class="start input">
				{{destination}}
			</cover-view>
		</cover-view>
	</view>
</template>

<script>
	import config from '../../common/config.js';
	import amapFile from '../../common/amap-wx.js'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				markers: [{}, {}, {}],
				poisdatas: [{}, {}, {}],
				title: 'map',
				destination: '搜索地点',
				latitude: '39.908696',
				longitude: '116.397474',
				name:"我的位置",
			}
		},
		//计算属性
		computed: {
			...mapState([
				'place'
			]),
		},
		onLoad() {
			this.getLocation();
		},
		methods: {
			...mapMutations(['savePath']),
			getLocation: function(e) {
				let that = this;
				let key = config.Config.key;
				let MyAmapFun = new amapFile.AMapWX({
					key: key
				});
				MyAmapFun.getRegeo({
					iconPath: "../../lib/img/mapicon_navi_s.png", //定位图片自己找个图标
					iconWidth: 22,
					iconHeight: 32,
					success: function(data) {
						let place = {
							name:"我的位置",
							location: data[0].longitude+','+data[0].latitude,
							address:data[0].name
						};
						that.longitude = data[0].longitude;
						that.latitude = data[0].latitude;
						that.savePath(place);
					},
					fail: function(info) {}
				})
			},
			//得到点击的marker的id，遍历markers数组，判断有没有相等的id
			//如果有的就能从this.poisdatas[i].address得到坐标位置（没有就提醒下）
			markertap: function(e) {
				for (var i = 0; i < this.markers.length; i++) {
					if (JSON.stringify(e).substring(18, 20) == this.markers[i].id) {
						uni.showToast({
							title: this.poisdatas[i].name,
							mask: false,
							duration: 1500
						});
					}
				}

			},
			navigatorTo: function(e) {
				uni.navigateTo({
					url: '/pages/routePlanning/search'
				})
			},
		}
	}
</script>

<style>
	.maps {
		height: 100vh;
		width: 100%;
	}

	.route {
		position: absolute;
		display: flex;
		background-color: #FFFFFF;
		width: 80%;
		height: 45px;
		top: 20px;
		margin: auto;
		left: 0;
		right: 0;
		border-radius: 30px;
	}

	.input {
		height: 45px;
		line-height: 45px;
		border-bottom: 1px solid #CDCDB4;
		padding: 0px 25px;
		color: #1C1C1C;
		font-size: 14px;
	}
</style>
